<template>
	<fx-list-filter @on-enter="onSearchClick">
		<template slot="row-1">
			<el-form-item label="物料：">
				<!-- <w-select ref='materialSelect' v-model="searchMaterial" multiple clearable collapseTags :optionlist='materialList' class="form-input">
				</w-select> -->
				<w-select-mulity
					ref='materialSelect'
					v-model="searchMaterial"
					:optionlist="materialList"
					class="form-input"
				>
				</w-select-mulity>
			</el-form-item>
			<el-form-item label="加工标识：" label-width="110px">
				<el-select v-model="processingFlag" prop="processingFlag" placeholder="请选择" clearable size='mini' class="form-input">
					<el-option
					v-for="item in processingFlagList"
					:key="item.id"
					:label="item.label"
					:value="item.id"
					>
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="启停状态：" label-width="110px">
					<el-select v-model="enable" prop="enable" placeholder="请选择" clearable size='mini' class="form-input">
						<el-option
							v-for="item in enableStateList"
							:key="item.id"
							:label="item.label"
							:value="item.id"
						>
						</el-option>
					</el-select>
			</el-form-item>
		</template>
		<template slot="tools">
			<el-button class="order-btn" type="primary" @click="onSearchClick">查询</el-button>
			<el-button class="order-btn" type="text"  @click="onResetClick">重置</el-button>
		</template>
	</fx-list-filter>
</template>
<script>
export default {
	name: 'filterBar',
	props: {
		materialList: {
			type: Array,
			default: () => {
				return []
			}
		}
	},
	data () {
		return {
			searchMaterial: [],
			enable: '',
			enableStateList: this.$fxStateMiddleware.getStateConfig('enableState'),
			processingFlagList: [{
				id: 0,
				label: '在制品'
			}, {
				id: 1,
				label: '产品'
			}, {
				id: 2,
				label: '原料'
			}],
			processingFlag: ''
		}
	},
	methods: {
		onSearchClick () {
			this.$emit('on-search', this.getFilterParams())
		},
		onResetClick () {
			this.searchMaterial = []
			this.enable = ''
			this.processingFlag = ''
		},
		getFilterParams () {
			const filterSearch = {
				materialIds: this.searchMaterial,
				enable: this.enable,
				processingFlag: this.processingFlag
			}
			const params = {}
			Object.keys(filterSearch).forEach(key => {
				if (filterSearch[key] !== '') {
					params[key] = filterSearch[key]
				}
			})
			return {
				...params
			}
		}
	}
}
</script>
<style lang="stylus" scoped>
@import '~$assets/stylus/varsty.styl'
.form-input {
	width: 170px
}
</style>
